<template>
	<view class="container">
		<!-- 头部区域 -->
		<view class="header">
			<!-- <view class="header-top">
				<view class="back-btn" @click="goBack">
					<uni-icons type="arrow-left" size="20" color="#333"></uni-icons>
				</view>
				<text class="title">酒店预订</text>
				<view class="menu-btn">
					<uni-icons type="more-filled" size="20" color="#333"></uni-icons>
				</view>
			</view> -->

			<!-- 搜索区域 -->
			<view class="search-area">
				<view class="date-section" @click="showCalendar=!showCalendar">
					<view class="date-item">
						<text class="date-label">入住</text>
						<text class="date-value">{{ formatDate(checkInDate) }}</text>
					</view>
					<view class="date-item">
						<text class="date-label">离店</text>
						<text class="date-value">{{ formatDate(checkOutDate) }}</text>
					</view>
				</view>
				<view class="divider"></view>
				<view class="city-section" @click="goCityChange">
					<text>{{ currentCity }}</text>
					<uni-icons type="bottom" size="12" color="#666"></uni-icons>
				</view>
				<view class="divider"></view>
				<view class="search-input">
					<uni-icons type="search" size="16" color="#999"></uni-icons>
					<input type="text" v-model="searchKey" placeholder="搜索酒店/地标/商圈" placeholder-class="placeholder" @input="searchFun"/>
				</view>
			</view>
		</view>

		<!-- 筛选区域 -->
		<view class="filter-section">
			<view v-for="(item, index) in filterOptions" :key="index" class="filter-item"
				:class="{ active: activeFilter === item.type }" @click="handleFilter(item.type,index)">
				<text>{{ item.itemText!=''?item.itemText:item.text }}</text>
				<uni-icons type="bottom" size="12"
					:color="activeFilter === item.type ? 'rgba(252,103,3,1)' : '#666'"></uni-icons>
			</view>
		</view>

		<!-- 酒店列表 -->
		<scroll-view scroll-y class="hotel-list" @scrolltolower="loadMore">
			<view v-if="hotelList.length > 0">
				<view v-for="hotel in hotelList" :key="hotel.id" class="hotel-card" @click="goToDetail(hotel.id as number)">
					<view class="hotel-image-wrapper">
						<image :src="hotel.cover" mode="aspectFill" class="hotel-image" />
						<!-- <view class="score">{{ hotel.score }}分</view> -->
					</view>
					<view class="hotel-content">
						<view class="hotel-main">
							<view class="flex-row justify-between">
								<text class="hotel-name">{{ hotel.title }}</text>
								<view class="hotel-price flex-col">
									<view class="current-price">
										<text class="symbol">¥</text>
										<text class="amount">{{ hotel.price }}</text>
										<text class="unit">起</text>
									</view>
									<text class="original-price">¥{{ hotel.origin_price }}</text>
								</view>
							</view>
							<text class="hotel-address">{{ hotel.address }}</text>
						</view>
						<!-- 	<view class="hotel-tags">
							<text 
								v-for="(tag, tagIndex) in hotel.tags" 
								:key="tagIndex" 
								class="tag"
							>{{ tag }}</text>
						</view> -->
				
					</view>
				</view>
			</view>
			<!-- Loading / Finished / Empty State Indicator -->
			<view class="list-status">
				 <!-- 显示 loading 指示器 -->
				<uni-load-more v-if="loading" status="loading" :showIcon="true" :contentText="{ contentdown: '', contentrefresh: '加载中...', contentnomore: '' }"></uni-load-more>
				 <!-- 完成时显示 'no more' 或 'empty' 消息 -->
				<uni-load-more v-else-if="finished" status="noMore" :showIcon="false" :contentText="{ contentdown: '', contentrefresh: '', contentnomore: loadingText }"></uni-load-more>
			</view>
		</scroll-view>
		<!-- <u-calendar :show="showCalendar" :mouthType="mouthType" mode="range" @close="showCalendar = false"
			@confirm="handleDateConfirm"></u-calendar> -->
		<u-popup :show="activeFilter !=''" mode="top">
			<view class="popup1">
				<view class="region" v-if="activeIndex==0">
					<view class="region-item flex-row items-center"
						v-for="(item,index) in filterOptions[activeIndex].option" :key="index" @click="toList(item)">
						<text :class="item.id==filterSort?'active':''">{{item.title}}</text>
					</view>
				</view>
				<!-- <view class="region" v-if="activeIndex==1">
					<view class="region-item flex-row items-center"
						v-for="(item,index) in filterOptions[activeIndex].option" :key="index" @click="toList(item)">
						<text :class="item.id==filterPrice?'active':''">{{item.title}}</text>
					</view>
				</view> -->
				<view class="work" v-if="activeIndex==1">
					<view class="flex-row" style="flex-wrap: wrap;max-height: 100%;overflow-y: scroll;">
						<view class="work-item flex-row justify-center items-center"
							v-for="(item,index) in filterOptions[activeIndex].option" :key="index" @click="toList(item)"
							:class="item.id==filterS?'active':''">
							<text>{{item.title}}</text>
						</view>
					</view>
				</view>

				<view class="btn flex-row justify-between items-center">
					<view class="close flex-row justify-center items-center" @click="activeFilter =''">取消</view>
					<view class="comf flex-row justify-center items-center" @click="filterFun">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showCalendar" mode="bottom" :round="15" @close="showCalendar=false">
			<view class="" style="padding-bottom: 120rpx;padding-top: 30rpx;">
				<!-- <multi-platform-calendar :type="0"></multi-platform-calendar> -->
				<hotelDatePicker :type="mouthType" @confirm="handleDateConfirm"></hotelDatePicker>
			</view>
		</u-popup>
	</view>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh,
		onHide
	} from "@dcloudio/uni-app";
	import { ref, computed } from 'vue';
	import { getHotelListApi, getHotelBasic_list } from '@/utils/apiPost.js'
	import hotelDatePicker from "@/components/hotel-date-picker/hotel-date-picker.vue"
	import { requestJsonp } from '@/utils/jsonp.js'
	import { generateAdminCodes } from '@/utils/getCityCode.js';
	onLoad((option) => {
		console.log("onload", option);
		let data1 = JSON.parse(decodeURIComponent(option.data))
		console.log(data1)
		checkInDate.value = data1.checkInDate
		checkOutDate.value = data1.checkGoDate
		searchKey.value = data1.searchKey
		mouthType.value = data1.mouthType
		location.value = data1.location
		if(cityArr.value.includes(data1.siteInfo.ad_info.province) ){
			currentCity.value = data1.siteInfo.ad_info.city
		}else{
			currentCity.value = data1.siteInfo.ad_info.district
		}
		
		getHotelBasic_listFun()
	})
	
	// --- Pagination State ---
	const pageNo = ref(1);          // 当前页码 (page number)
	const pageSize = ref(10);         // 每页项目数 (根据需要调整)
	const loading = ref(false);       // 指示加载是否正在进行的 flag
	const finished = ref(false);      // 指示是否已加载所有数据的 flag
	const loadingText = ref('加载中...'); // 加载期间/结束时显示的文本
	
	const cityArr = ref(["北京市", '天津市', '上海市', '重庆市'])
	const serviceList = ref([])
	const getHotelBasic_listFun = () => {
		getHotelBasic_list().then(res=>{
			console.log(res)
			if(res.code == 1){
				filterOptions.value[1].option = res.data
			}
		}).catch(error=>{
			console.log(error)
		})
	}
	const currentCity = ref('天津');
	const searchKey = ref('');
	const activeFilter = ref('');
	const activeIndex = ref(-1)
	const mouthType = ref(0);
	
	const location = ref({
		provinceCode: '',
		cityCode: '',
		districtCode: '',
		lat: '',
		lng: '',
		address: ''
	})

	const codeValue = ref({})
	// 筛选选项配置
	const filterShow = ref(false)
	const filterSort = ref('1')
	const filterPrice = ref('')
	const filterS = ref('')
	const filterOptions = ref([
		{ type: 'sort', text: '智能优先', itemText: '', option: [{ title: '智能优先', id: 1 }, { title: '距离优选', id: 2 },{ title: '由低到高', id: 3 }, { title: '由高到低', id: 4 }] },
		{ type: 'filter', text: '筛选', itemText: '', option: [{ title: '免费wifi', id: 5 }, { title: '免费停车场', id: 6 }] }
	]);
	
	interface hotelItem {
		address: String,
		cover: String,
		id: Number,
		origin_price: Number,
		price: Number,
		title: String
	};
	// 酒店数据
	const hotelList = ref<hotelItem[]>([]);
	hotelList.value = [
		{
			id: 1,
			title: '天津国际大酒店',
			address: '红桥区平安大街199号',
			price: 688,
			origin_price: 1288,
			cover: 'https://public.readdy.ai/ai/img_res/4fc142054abd14860465774aa1d719a9.jpg'
		},
		{
			id: 2,
			title: '天津希尔顿酒店',
			address: '和平区张自忠路88号',
			price: 888,
			origin_price: 1688,
			cover: 'https://public.readdy.ai/ai/img_res/89fd31927854196167b95c2043cf4547.jpg'
		},
		{
			id: 3,
			title: '天津丽思卡尔顿酒店',
			address: '河西区友谊路33号',
			price: 1288,
			origin_price: 2288,
			cover: 'https://public.readdy.ai/ai/img_res/1ef29ed3acbe88f0679773e3e55122bc.jpg'
		}
	]

	// 日期选择相关
	const today = new Date();
	const startDate = today.toISOString().split('T')[0];
	const endDate = new Date(today.getTime() + 90 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];


	const showCalendar = ref(false);
	// 使用完整的日期格式存储
	const checkInDate = ref(startDate);
	const checkOutDate = ref(new Date(today.getTime() + 24 * 60 * 60 * 1000).toISOString().split('T')[0]);

	// 格式化日期显示
	const formatDate = (dateStr : string) => {
		if (!dateStr) return '';
		const date = new Date(dateStr);
		return `${date.getMonth() + 1}/${date.getDate()}`;
	};
	const handleDateConfirm = (e) => {
		console.log(e);
		showCalendar.value = false
		checkInDate.value = e[0]
		checkOutDate.value = e[e.length - 1]
		// checkInDate.value = e.detail.value
	}
	const toList = (v : any) => {
		if (activeIndex.value == 0) {
			filterSort.value = v.id
			filterOptions.value[activeIndex.value].itemText = v.title
		} 
		// else if (activeIndex.value == 1) {
		// 	filterPrice.value = v.id
		// } 
		else if (activeIndex.value == 1) {
			if(v.id == filterS.value){
				filterS.value = ''
				filterOptions.value[activeIndex.value].itemText = '筛选'
			}else{
				filterS.value = v.id
				filterOptions.value[activeIndex.value].itemText = v.title
			}
		}
		
	}

	// 入住日期选择
	const onCheckInChange = (e : any) => {
		const newDate = e.detail.value;
		checkInDate.value = newDate;

		// 如果离店日期早于或等于入住日期，自动将离店日期设置为入住日期的后一天
		if (checkOutDate.value <= newDate) {
			const nextDay = new Date(newDate);
			nextDay.setDate(nextDay.getDate() + 1);
			checkOutDate.value = nextDay.toISOString().split('T')[0];
		}
	};

	// 离店日期选择
	const onCheckOutChange = (e : any) => {
		const newDate = e.detail.value;
		// 确保离店日期不早于入住日期
		if (newDate > checkInDate.value) {
			checkOutDate.value = newDate;
		} else {
			uni.showToast({
				title: '离店日期不能早于入住日期',
				icon: 'none'
			});
		}
	};

	const goBack = () => {
		uni.navigateBack();
	};

	const selectCity = () => {
		uni.showToast({ title: '选择城市', icon: 'none' });
	};

	const handleFilter = (type : string, index : number) => {
		activeFilter.value = type;
		activeIndex.value = index
	};

	const goToDetail = (id : number) => {
		// let obj={
		// 	checkInDate:checkInDate.value,
		// 	checkGoDate:checkOutDate.value,
		// 	searchKey:searchKey.value,
		// 	mouthType:mouthType.value,
		// 	id: id,
		// }
		uni.navigateTo({
			url: `/pages/hotel-detail/hotel-detail?checkInDate=${checkOutDate.value}&checkGoDate=${checkOutDate.value}&searchKey=${searchKey.value}&mouthType=${mouthType.value}&id=${id}`
		});
	};

	
	
	
	// const getShopList = () => {
	// 	let obj = {
	// 		name: searchKey.value,
	// 		// province_id: Number(location.value.provinceCode),
	// 		// city_id: Number(location.value.cityCode),
	// 		// area_id: Number(location.value.districtCode),
	// 		province_id: Number(120000),
	// 		city_id: Number(120100),
	// 		area_id: Number(120106),
	// 		page_no: '1',
	// 		sort: filterSort.value,
	// 		basic_id: filterS.value,
	// 		type: mouthType.value
	// 	}
	// 	getHotelListApi(obj).then(res=>{
	// 		console.log(res)
	// 		if(res.code == 1){
	// 			hotelList.value = res.data as hotelItem[]
	// 		}
	// 	}).catch(error=>{
	// 		console.log(error)
	// 	})
	// }
	const getShopList = async (isLoadMore = false) => {
		// 防止在已经在加载（loading）或已完成（finished）时重复获取（除非是刷新操作）
		if (!isLoadMore && loading.value) return; // 如果已经在 loading，不要刷新
	    if (isLoadMore && (loading.value || finished.value)) {
	        console.log('已经在 loading 或 finished，跳过 load more。');
	        return; // 如果已经在 loading 或 finished，不要加载更多
	    }
	
		loading.value = true; // 设置 loading state
	    loadingText.value = '加载中...'; // 重置加载文本
	
		// 如果不是加载更多（即，是刷新或初始加载），则重置 state
		if (!isLoadMore) {
			pageNo.value = 1;
			finished.value = false;
			hotelList.value = []; // 清空现有列表以进行全新加载
		}
	
		let obj = {
			name: searchKey.value,
			// --- 使用你实际的位置数据 ---
			province_id: Number(location.value.provinceCode), // 示例 fallback
			city_id: Number(location.value.cityCode),       // 示例 fallback
			area_id: Number(location.value.districtCode), // 示例 fallback
			// --- 用于测试 ---
			// province_id: Number(120000),
			// city_id: Number(120100),
			// area_id: Number(120106),
			// --- Pagination Params ---
			page_no: pageNo.value,
			page_size: pageSize.value, // 将 page size 添加到 API 请求
			// --- 其他 Filters ---
			sort: filterSort.value,
			basic_id: filterS.value,
			type: mouthType.value
		}
	
		console.log("使用参数请求酒店:", obj);
	
		try {
			const res = await getHotelListApi(obj);
			console.log("API Response:", res);
	
			if (res.code == 1 && res.data) {
	            const newData = (res.data || []) as hotelItem[]; // 确保它是一个 array
	
				if (pageNo.value === 1) {
					hotelList.value = newData; // 第一页替换列表
				} else {
					hotelList.value = [...hotelList.value, ...newData]; // 后续页面追加数据
				}
	
	            // 检查这是否是最后一页
				if (newData.length < pageSize.value) {
					finished.value = true;
	                loadingText.value = hotelList.value.length === 0 ? '暂无数据' : '没有更多数据了';
					console.log("已到达数据末尾。");
				} else {
	                // 如果未完成，为下一页做准备
	                pageNo.value++; // 为*下一次* loadMore 调用增加 page number
	            }
	
			} else {
				// 处理 API 错误或第一页的空数据
	            if (pageNo.value === 1) {
	                hotelList.value = []; // 如果第一页失败或未返回数据，则清空列表
	            }
				finished.value = true; // 如果出错或响应意外，则假定已完成
	            loadingText.value = hotelList.value.length === 0 ? '暂无数据' : '加载失败';
				uni.showToast({ title: res.msg || '加载失败', icon: 'none' });
				console.error("API 错误或无数据:", res.msg);
			}
		} catch (error) {
			console.error("获取酒店列表时出错:", error);
	        if (pageNo.value === 1) {
	            hotelList.value = []; // 第一页出错时清空列表
	        }
			finished.value = true; // 在 catch 时假定已完成
	        loadingText.value = hotelList.value.length === 0 ? '暂无数据' : '加载出错';
			uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' });
		} finally {
			loading.value = false; // 重置 loading state
	        uni.stopPullDownRefresh(); // 停止下拉刷新指示器（如果激活）
		}
	}
	// 新增加载更多功能
	// 替换现有的占位 loadMore function
	const loadMore = () => {
	    console.log("滚动到达底部，尝试加载更多...");
		if (!loading.value && !finished.value) {
			// 调用 getShopList 表明这是一个 load more 操作
			getShopList(true);
		} else {
	        console.log(`跳过 Load more：Loading=${loading.value}, Finished=${finished.value}`);
	    }
	};
	const filterFun = () => {
		activeFilter.value = ''
		getShopList(false)
	}
	onShow(()=>{
		getShopList(false)
	})
	onHide(()=>{
		// uni.$off('city-selected')
	})
	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
	const searchFun = () => {
		if (searchTimeout) {
			clearTimeout(searchTimeout);
		}
		searchTimeout = setTimeout(() => {
			// 重置 pagination 并获取第 1 页
			getShopList(false);
		}, 500); // 根据需要调整 debounce 延迟（例如 500ms）
	}
	const goCityChange = () => {
		uni.$off('city-selected')
		uni.$on('city-selected', async (data) => {
		  // selectedCity = data.name;
		  console.log('接收到的城市:1111', data);
		  try {
		  	const res = await requestJsonp('https://apis.map.qq.com/ws/geocoder/v1/', {
		  		key: "6LEBZ-FJ6CL-VAOPZ-ECZ4O-3YJVE-ROF4G",
		  		location: data.latitude + ',' + data.longitude,
		  		output: 'jsonp',
		  	});
		  	console.log('结果:', res);
		  	if(res.message == "Success"){
		  		location.value.address = res.result.address
		  		location.value.lat = res.result.location.lat
		  		location.value.lng = res.result.location.lng
		  		let obj = await generateAdminCodes(res.result.ad_info.adcode);
		  		console.log(obj)
		  		codeValue.value = obj as any
				
				console.log(codeValue.value)
				getShopList(false)
		  	}
		  } catch (err) {
		  	console.error('请求失败:', err);
		  }
		});
		uni.navigateTo({
			url: '/pages/citysPage/index'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #f8f8f8;
	}

	.header {
		background: #fff;
		z-index: 100000;
		position: relative;
		padding-bottom: 16rpx;

		&-top {
			display: flex;
			align-items: center;
			height: 88rpx;
			padding: 0 24rpx;

			.back-btn,
			.menu-btn {
				width: 88rpx;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.title {
				flex: 1;
				text-align: center;
				font-size: 34rpx;
				font-weight: 600;
				color: #333;
			}
		}
	}

	.search-area {
		padding: 0 24rpx;
		width: 95%;
		margin: 0 2.5%;
		background: #f5f5f5;
		display: flex;
		align-items: center;
		height: 70rpx;

		.date-section {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 100%;
			padding-right: 10rpx;

			.date-item {
				display: flex;
				align-items: center;
				gap: 8rpx;
				height: 30rpx;

				.date-label {
					font-size: 18rpx;
					color: #999;
				}

				.date-value {
					font-size: 20rpx;
					color: #333;
				}
			}
		}

		.divider {
			width: 2rpx;
			height: 40rpx;
			background-color: #eee;
			margin: 0 10rpx;
		}

		.city-section {
			display: flex;
			align-items: center;
			gap: 4rpx;
			font-size: 26rpx;
			color: #333;
			padding-right: 10rpx;
		}

		.search-input {
			flex: 1;
			height: 56rpx;
			background: #f5f5f5;
			border-radius: 28rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			gap: 8rpx;

			input {
				flex: 1;
				font-size: 26rpx;
			}

			.placeholder {
				color: #999;
			}
		}
	}

	.filter-section {
		height: 70rpx;
		background: #fff;
		display: flex;
		z-index: 100000;
		position: relative;
		justify-content: space-around;
		margin-top: 2rpx;

		.filter-item {
			// flex: 1;
			width: 30%;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8rpx;

			text {
				font-size: 26rpx;
				color: #000;
				// font-weight: 600;
			}

			&.active text {
				color: rgba(252, 103, 3, 1);
			}
		}
	}

	.hotel-list {
		padding: 24rpx;
		box-sizing: border-box;
		width: 100%;
		.hotel-card {
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			margin-bottom: 24rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			width: 100%;
			box-sizing: border-box;

			.hotel-image-wrapper {
				position: relative;
				height: 300rpx;
				width: 100%;

				.hotel-image {
					width: 100%;
					height: 100%;
				}

				.score {
					position: absolute;
					top: 16rpx;
					right: 16rpx;
					background: rgba(25, 137, 250, 0.9);
					color: #fff;
					padding: 4rpx 12rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
				}
			}

			.hotel-content {
				padding: 24rpx;
				width: 100%;
				box-sizing: border-box;

				.hotel-main {
					margin-bottom: 16rpx;

					.hotel-name {
						font-size: 32rpx;
						font-weight: 600;
						color: #333;
						margin-bottom: 8rpx;
						display: block;
					}


				}

				.hotel-address {
					font-size: 26rpx;
					color: #666;
					display: block;
				}

				.hotel-tags {
					display: flex;
					flex-wrap: wrap;
					// gap: 12rpx;
					margin-bottom: 16rpx;

					.tag {
						font-size: 24rpx;
						color: #111;
						padding: 0rpx 6rpx;
						border-right: 2rpx solid #aaa;
						// background: rgba(255,107,107,0.1);
						border-radius: 4rpx;

						&:nth-last-child(1) {
							border-right: 0rpx;
						}
					}

				}

				.hotel-price {
					display: flex;
					align-items: baseline;
					position: relative;
					gap: 12rpx;
					margin-top: -10rpx;

					.current-price {
						display: flex;
						align-items: baseline;
						color: #111;

						.symbol {
							font-size: 24rpx;
							color: #fc6703;
						}

						.amount {
							font-size: 40rpx;
							font-weight: 600;
							color: #fc6703;
						}

						.unit {
							font-size: 24rpx;
							margin-left: 4rpx;
						}
					}

					.original-price {
						font-size: 24rpx;
						color: #999;
						position: absolute;
						top: 50rpx;
						text-decoration: line-through;
					}
				}
			}
		}
	}

	.placeholder {
		color: #999;
	}

	.popup1 {
		position: fixed;
		top: 0rpx;
		padding-top: 170rpx;
		// padding-bottom: 40rpx;
		width: 100%;
		max-height: 50vh;
		// z-index: 100003;
		overflow-y: scroll;
		background-color: #fff;

		.region {
			// padding-bottom: 142rpx;
			font-size: 28rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #666666;

			.region-item {
				height: 90rpx;
				padding: 0 40rpx;
			}

			.active {
				color: #fc6703;
			}
		}

		.work {
			// padding-bottom: 142rpx;
			padding-left: 40rpx;
			height: 100%;

			.workName {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-top: 32rpx;
				margin-bottom: 35rpx;
			}

			.work-item {
				min-width: 152rpx;
				padding: 0 24rpx;
				height: 62rpx;
				background: #F8F8F8;
				border-radius: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-right: 27rpx;
				margin-bottom: 28rpx;
			}

			.active {
				background-color: rgba(252, 103, 3, .1);
				color: #fc6703;
			}
		}

		.jop {
			// padding-bottom: 102rpx;
			height: 100%;
			// overflow-y: hidden;

			.jop1 {
				width: 230rpx;
				height: 100%;
				overflow-y: scroll;
				background: #F8F8F8;

				.jop-item {
					height: 104rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.active {
					background: #FFFFFF;
					color: #fc6703;
				}
			}

			.jop2 {
				width: 518rpx;
				height: 100%;
				overflow-y: scroll;
				background: #FFFFFF;

				.jop-item {
					height: 94rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.active {
					color: #fc6703;
				}
			}
		}

		.btn {
			// margin-top: 20rpx;
			// position: absolute;
			// bottom: 0;
			width: 100%;
			padding: 26rpx 30rpx;
			background-color: #fff;
			border-top: 2rpx solid #F8F8F8;

			.close {
				width: 188rpx;
				height: 78rpx;
				background: #FFFFFF;
				border: 2px solid #fc6703;
				border-radius: 20rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(252, 103, 3, .5);
			}

			.comf {
				width: 472rpx;
				height: 78rpx;
				background: #fc6703;
				border-radius: 20rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
	
	
	// 为 status 指示器容器添加 style
	.list-status {
		padding: 30rpx 0; // 在指示器周围添加一些 padding
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	// 确保 hotel-list 占据可用高度
	.hotel-list {
	   /* 计算高度：屏幕高度 - header 高度 - filter section 高度 */
	   /* 根据你实际的 header/filter 高度调整这些值 */
	   height: calc(100vh - 86rpx - 70rpx); /* 示例: header=86rpx, filter=70rpx */
	   box-sizing: border-box;
	   // padding-bottom: 50rpx; /* 如果 status 与内容重叠，添加 padding */
	}

	 /* 确保 container 填充高度 */
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #f8f8f8;
	}
</style>